<template>
  <div id="home">
    <div class="banner">
      <div class="header">
        <div class="logo">
          <img src="../assets/logo.png" alt />
          <div>BF-Design</div>
        </div>
        <div class="search_box">
          <div class="search">
            <div class="search_icon"></div>
            <input type="text" placeholder="搜索" />
          </div>
        </div>
        <ul class="menu-row">
          <router-link to="/zh-CN/guide/introduce">
            <li>
              <span>介绍</span>
            </li>
          </router-link>
          <router-link to="/zh-CN/guide/start">
            <li>
              <span>起步</span>
            </li>
          </router-link>
          <router-link to="/zh-CN/component">
            <li>
              <span>组件</span>
            </li>
          </router-link>
          <router-link to="/zh-CN/guide/joinLabour">
            <li>
              <span>贡献</span>
            </li>
          </router-link>
        </ul>
        <div class="git">
          <a href="https://github.com/Buried-Love/BF-Design-Ui" target="_black">
            <div class="github"></div>
          </a>
          <a href="https://gitee.com/Buried-LoveBoy/bf-design-ui" target="_black">
            <div class="gitee"></div>
          </a>
        </div>
      </div>
      <div class="box">
        <div class="box_right">
          <h2
            class="slogan"
            style="transform: translate3d(0px, 0px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;"
          >
            <div style="font-size:90px;">
              <span style="opacity: 1; transition: opacity 1300ms ease-in 373ms;">BF</span>
              <span style="opacity: 1; transition: opacity 1300ms ease-in 274ms;">&nbsp;</span>
              <span style="opacity: 1; transition: opacity 1300ms ease-in 403ms;">Design</span>
            </div>
          </h2>
          <div class="tips">
            <p>
              BF-Design-Ui 一套为开发者准备的基于Vue 2.0的UI组件库
              为您创造高效工作体验!
            </p>
          </div>
          <div class="home-version">
            <div class="v-icon"></div>当前版本: v1.0.5
          </div>
          <div class="btn">
            <div class="start_using" @click="startUsingClick">开始使用</div>
            <div class="start_using start_using2" @click="startUsingClick">查看介绍</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="center">
        <div class="introduce-item introduce-left">
          <div class="center_main">
            <div class="title">自定义主题 / 多语言切换</div>
            <p>BF-Design-Ui 基于Sass进行开发并且提供一套默认的UI主题样式，可以在一定程度上进行自定义主题，以满足业务和场景的多样化需求。</p>
            <p>BF-Design-Ui 精心为您准备了一个多语言切换的工程，内部默认使用中文语言。如果需要使用其他语言，可以进行语言配置。</p>
          </div>
        </div>
        <div class="introduce-item introduce-right">
          <div class="imgchange">
            <img class="img1" src="../assets/home/ProjectManagement.svg" alt />
            <img class="img2" src="../assets/home/FinanceManagement.svg" alt />
            <img class="img3" src="../assets/home/CustomerResearch.svg" alt />
            <img class="img4" src="../assets/home/Meditation.svg" alt />
            <img class="img5" src="../assets/home/Meeting.svg" alt />
            <img class="img6" src="../assets/home/Embellishment.svg" alt />
          </div>
        </div>
      </div>
      <div class="center">
        <div class="introduce-item introduce-right">
          <div class="imgenlarge">
            <img src="../assets/home/Home.svg" alt />
            <!-- <img src="../assets/logoTop.png" alt /> -->
          </div>
        </div>
        <div class="introduce-item introduce-left">
          <div class="center_main">
            <div class="title">可持续更新维护 / 更注重文档</div>
            <p>BF-Design-Ui 开发团队会持续仔细认真的听取每一条建议，并将用户反馈的问题总结做好复盘。持续不间断的进行项目维护，给用户更好的体验。</p>
            <p>BF-Design-Ui 的文档，力求把所有可能需要注意的地方都详细说明，让开发人员有更好的开发体验。文档有问题或有错误，我们将第一时间更改与优化。</p>
          </div>
        </div>
      </div>
    </div>
    <footerBar />
  </div>
</template>
<script>
import footerBar from "../components/footer.vue";
export default {
  name: "home",
  components: {
    footerBar,
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    startUsingClick() {
      this.$router.push({
        path: "/zh-CN/guide/introduce",
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='scss'>
#home {
  width: 100%;
  .banner {
    width: 100%;
    height: 673px;
    text-align: center;
    background: url("../assets/home/banner.png") no-repeat center;
    background-size: 100% 100%;
    overflow: hidden;
    .box {
      max-width: 1080px;
      height: 100%;
      margin: 0 auto;
      .box_right {
        width: 45%;
        height: 100%;
        margin-left: 55%;
      }
    }
    .header {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1280px;
      height: 64px;
      margin-right: auto;
      margin-left: auto;
      margin: 5px auto 0;
      padding: 0 40px;
      transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      .logo {
        display: flex;
        align-items: center;
        width: 170px;
        height: 100%;
        padding-left: 40px;
        margin-right: 18px;
        overflow: hidden;
        font-weight: bold;
        font-size: 18px;
        color: #1a2b3b;
        font-family: webfont, sans-serif;
        letter-spacing: 2.5px;
        letter-spacing: -0.18px;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        img {
          width: 28px;
          height: 28px;
          margin-right: 10px;
        }
      }
      .search_box {
        width: 460px;
        height: 20px;
        border-left: 1px solid #b9bec4;
        padding-left: 20px;
        .search {
          position: relative;
          width: 220px;
          height: 20px;
          border-radius: 30px;
          background-color: #fff;
          .search_icon {
            position: absolute;
            left: 5px;
            top: 2px;
            width: 18px;
            height: 18px;
            background: url("../assets/svg/search.svg") no-repeat center;
            background-size: 100% 100%;
          }
          input {
            width: 100%;
            height: 100%;
            font-size: 12px;
            columns: #333;
            padding-left: 30px;
            background: none;
            outline: none;
            border: none;
            &:focus {
              border: none;
            }
          }
        }
      }
      .menu-row {
        display: flex;
        align-items: center;
        margin-left: auto;
        width: 290px;
        height: 100%;
        text-align: center;
        li {
          width: 68px;
          list-style: none;
          color: #1a2b3b;
          font-size: 16px;
          font-weight: 700;
          text-decoration: none;
          background-color: transparent;
          outline: none;
          cursor: pointer;
          &:hover {
            transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
            color: #96989a;
          }
        }
      }
      .git {
        display: flex;
        .github {
          width: 22px;
          height: 22px;
          margin-right: 10px;
          background: url("../assets/svg/github.svg") no-repeat center;
          background-size: 100% 100%;
          cursor: pointer;
        }
        .gitee {
          width: 22px;
          height: 22px;
          background: url("../assets/svg/gitee.svg") no-repeat center;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
    .slogan {
      position: relative !important;
      margin-top: 120px;
      margin-bottom: 0.5em;
      font-weight: 600;
      color: #1a2b3b;
      font-size: 68px;
      font-family: webfont, sans-serif;
      line-height: 82px;
      letter-spacing: 2.5px;
      text-align: start;
    }

    .tips {
      width: 100%;
      color: #f0f0f0;
      font-size: 18px;
      // margin-top: 74px;
      // position: relative;
      p {
        // position: absolute;
        // right: 0;
        width: fit-content;
        text-align: start;
        color: rgb(146, 149, 151);
      }
    }
    .home-version {
      position: relative;
      width: 185px;
      font-size: 16px;
      color: rgb(25, 126, 254);
      // margin: 0 auto;
      margin-top: 65px;
      padding-left: 20px;
      .v-icon {
        position: absolute;
        left: 13px;
        top: 1px;
        width: 18px;
        height: 20px;
        background: url("../assets/version.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    .btn {
      display: flex;
      width: 258px;
      margin-top: 65px;
      .start_using {
        height: 45px;
        padding: 0 20px;
        line-height: 45px;
        border-radius: 3px;
        border: 1px solid #fff;
        border-color: rgb(25, 126, 254);
        font-size: 16px;
        color: #f1f1f1;
        background-color: rgb(25, 126, 254);
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        border-radius: 25px;
        margin-right: 20px;
        &:hover {
          color: #fff;
          border-color: #66b1ff;
          background-color: #66b1ff;
        }
      }
      .start_using2 {
        background: none;
        color: rgb(25, 126, 254);
      }
    }
  }
  .main {
    width: 890px;
    height: auto;
    margin: 0px auto;
    padding-top: 100px;
    .center {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .introduce-item {
        width: 600px;
        height: 450px;
        .center_main {
          width: 100%;
          height: 300px;
          .title {
            margin-top: 65px;
            color: #242424;
            font-size: 30px;
            font-weight: bolder;
          }
          p {
            color: #605b5b;
            margin-top: 20px;
            line-height: 24px;
          }
        }

        .imgchange {
          width: 400px;
          height: 400px;
          background-color: #fff;
          position: relative;
          overflow: hidden;
          cursor: pointer;
          & > img {
            transition: all 0.8s;
            position: absolute;
          }
          &:hover .img1 {
            width: 220px;
            height: 220px;
            top: 45px;
          }
          &:hover .img2 {
            top: 20px;
            left: 245px;
          }

          &:hover .img3 {
            top: 140px;
            left: 245px;
            transition-delay: 0.1s;
          }

          &:hover .img4 {
            top: 270px;
            left: 245px;
            transition-delay: 0.2s;
          }

          &:hover .img5 {
            top: 270px;
            left: 85px;
            transition-delay: 0.3s;
          }

          &:hover .img6 {
            top: 300px;
            left: -5px;
            transition-delay: 0.35s;
          }
        }
        .img1 {
          width: 350px;
          height: 350px;
          left: 20px;
          top: 10px;
        }
        .img2 {
          width: 150px;
          height: 150px;
          top: -150px;
          left: 340px;
        }
        .img3 {
          width: 150px;
          height: 150px;
          top: 200px;
          left: 400px;
        }
        .img4 {
          width: 150px;
          height: 150px;
          top: 400px;
          left: 290px;
        }
        .img5 {
          width: 150px;
          height: 150px;
          top: 400px;
          left: 160px;
        }
        .img6 {
          width: 100px;
          height: 100px;
          top: 400px;
          left: 40px;
        }
        .imgenlarge {
          width: 400px;
          height: 400px;
          cursor: pointer;
          border-radius: 16px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            transition: all 0.8s;
          }
          &:hover img {
            transform: scale(1.3);
            transition: all 0.5s;
          }
        }
      }
    }
  }
}
</style>